<div id="app">
    <input type="checkbox" v-model="ok">同意许可协议
    
    <!-- 
        v:if 条件指令：
        v-if 指令会动态地创建或移除 DOM 元素，
        其切换开销大，
        如果在运行时条件很少改变则推荐使用，
        配套的还有 v-else 和 v-else-if 
    -->
    <h1 v-if="ok">if：协议内容.</h1>
    <h2 v-else>no</h2>

    <!-- 
        v:show 条件指令：
        v-show 指令会动态地为元素添加或移除 style="display:none;" 样式，
        其初始渲染开销大，
        如果需要非常频繁地切换则推荐使用 
    -->
    <h3 v-show="ok">show：协议内容.</h3>
    <h4 v-show="!ok">no</h4>
    
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok: false
        }
    })
</script>